{extend name="admin@index_layout"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">商品列表</div>
    <div class="layui-card-body">
        <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm layui-btn-danger confirm layui-batch-all" data-href='{:url("delete")}'>批量删除</a>
        <a class="layui-btn layui-btn-sm" href="{:url('add')}">添加商品</a>
    </div>
</script>
<script type="text/html" id="barTool">
    <a href='{:url("edit")}?id={{ d.id }}' class="layui-btn layui-btn-xs">编辑</a>
    <a href='{:url("delete")}?ids={{ d.id }}' class="layui-btn layui-btn-danger layui-btn-xs layui-tr-del">删除</a>
</script>
{/block}
{block name="script"}
<script>
function openMsg(data) {
    var data = '<img id="pitureChange" style="width: 100%;height: 100%" src="' + data + '"  >'
    layer.msg(data, {
        time: 1000
    });
}

layui.use('table', function() {
    var table = layui.table,
        $ = layui.$,
        form = layui.form;
    table.render({
        elem: '#dataTable',
        toolbar: '#toolbarDemo',
        url: '{:url("manage")}',
        sort:true,
        cols: [
            [
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', width: 80, title: '商品ID' },
                { field: 'image',
                    width: 150,
                    title: '商品图片',
                    templet : function(item){
                        return '<img id="pitureChange" style="display: inline-block; width: 100%; height: 100%;" src="'+item.image+'">';
                    }
                },
                { field: 'categoryname', title: '商品类别' },
                { field: 'goodsname', title: '商品名称' },
                { field: 'money', title: '商品价格' },
                { field: 'promotionmoney', title: '促销价格' },
                { field: 'state', title: '状态' },
                { field: 'introduce', title: '商品介绍' },
                { fixed: 'right', width: 120, title: '操作', templet: '#barTool' }
            ]
        ]
    });
});

$(document).on("mouseout", ".layui-table-main tr", function (data) {

    if (data.relatedTarget != null && data.relatedTarget.id == "pitureChange") {
        console.log(data.relatedTarget.currentSrc);
        openMsg(data.relatedTarget.currentSrc);
    }
});

</script>
{/block}